<template>
  <m-box title="采购分析" class="purchase-analysis">
    <m-row :gutter="20">
      <m-col :span="24">
        <div class="d-box">
          <div class="d-title">
            <span>本年</span>
            <dv-decoration-8 style="width: 180px; height: 36px"></dv-decoration-8>
          </div>
          <dashboard-chart class="d-c" title="采购及时率(%)" :val="yearRate" />
          <dashboard-chart class="d-c" title="采购合格率(%)" :val="qualifiedYearRate" />
        </div>
      </m-col>
      <m-col :span="24">
        <div class="d-box">
          <div class="d-title">
            <span>本月</span>
            <dv-decoration-8 :reverse="true" style="width: 180px; height: 36px"></dv-decoration-8>
          </div>
          <dashboard-chart class="d-c" title="采购及时率(%)" :val="monthRate" />
          <dashboard-chart class="d-c" title="采购合格率(%)" :val="timelyMonthRate" />
        </div>
      </m-col>
    </m-row>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { onMounted } from 'vue'
import dashboardChart from './widget/dashboardChart/index.vue'

const yearRate = ref(0) // 本年：采购及时率
const qualifiedYearRate = ref(0) // 本年：采购合格率
const monthRate = ref(0) // 本月：采购及时率
const timelyMonthRate = ref(0) // 本月：采购合格率

function caculate(v) {
  return Math.round(v * 100) / 10000
}
const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/geteProcurementAnalysisReport')
    yearRate.value = caculate(res.yearRate)
    qualifiedYearRate.value = caculate(res.qualifiedYearRate)
    monthRate.value = caculate(res.monthRate)
    timelyMonthRate.value = caculate(res.timelyMonthRate)
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.purchase-analysis {
  .m-box__body {
    overflow: auto;
    > div {
      .border-box-content {
        > .m-row {
          height: 100%;
          display: flex;
          flex-direction: column;
          > .m-col-24 {
            flex: 1;
            > .d-box {
              height: 100%;
              display: flex;
              align-items: center;
              .d-title {
                padding-top: 10px;
                width: 100px;
                color: #fff;
                text-align: center;
                font-size: 18px;
                position: relative;
                span {
                  font-weight: 700;
                  color: rgb(24, 186, 214);
                }
                .dv-decoration-8 {
                  position: absolute;
                  bottom: -50%;
                  left: 40%;
                  transform: translateX(-50%) scale(0.4);
                }
              }
              ::v-deep(.d-c) {
                flex: 1;
                width: 180px;
                height: 70px;
                position: relative;
                .dashboard-echart__content {
                  width: 220px !important;
                  height: 220px !important;
                  position: absolute;
                  top: 40%;
                  left: 50%;
                  transform: translate(-50%, -50%) scale(0.82);
                }
              }
            }
          }
          > .m-col-24:nth-child(2) {
            .d-title {
              .dv-decoration-8 {
                left: 55%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
